<template class="avatar">
  <q-btn-dropdown unelevated >
    <template v-slot:label>
      <q-avatar size="26px">
        <img src="https://cdn.quasar.dev/img/boy-avatar.png">
      </q-avatar>
    </template>
    <template>
      <q-list >
        <q-item clickable dense v-close-popup @click="logout">
          <q-item-section>
            <q-item-label style="font-size: 10pt;color: #333">退出登录</q-item-label>
          </q-item-section>
        </q-item>

      </q-list>
    </template>
  </q-btn-dropdown>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'userTag',
  data () {
    return {
      multiLine: false
    }
  },
  methods: {
    logout(){
      this.$store.dispatch("LogOutByLoginFirst").finally(
        ()=>{
          this.$router.push("/login")
        }
      )
    },
    getStringLengthForChinese (val) {
      let str = String(val);
      let bytesCount = 0;
      for (let i = 0, n = str.length; i < n; i++) {
        let c = str.charCodeAt(i);
        if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) {
          bytesCount += 1;
        } else {
          bytesCount += 2;
        }
      }
      return (bytesCount / 2).toFixed(0);
    },
    getLength () {
      let nameLength = this.getStringLengthForChinese(this.userDisplayName)
      let mgrLength = this.getStringLengthForChinese(this.vest)
      return (nameLength / 10 + mgrLength / 12) > 1;
    }
  },
  computed: {
    ...mapGetters([])
  },
  mounted () {
  },
  beforeDestroy () {

  }
}
</script>

<style scoped lang="stylus">
  .ellipsis-line-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-align: center;
  }
  .ellipsis-line-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-height: 20px
    text-align: left;
    -webkit-box-orient: vertical;
  }

  >>>.q-btn__wrapper {
    padding 4px !important
  }
</style>
